import { Modal } from 'antd';
import { forwardRef, useEffect, useRef, useState } from 'react';
import Uploader from '../InbizUpload';
import './index.less';
import { GetFolderById } from './service';

type IProps = {
  visible: boolean;
  folderId: string | number;
  targetFolder: string | number[];
  multiple?: boolean;
  uploadfolder?: boolean;
  dropDisabled?: boolean;
  thumbnail?: boolean;
  fixedHeight?: boolean;
  fileSize?: string;
  fileId?: string;
  fileName?: string;
  readOnly: boolean;
  disabled: boolean;
  permission: boolean;
  controlId: string;
  fileType?: { [key: string]: any };
  repeatStrategy: string;
  createChildrenFolder: { [key: string]: any };
  uploadType: string;
  fileList?: Array<any>;
  onOk: (list: any) => void;
  onCancel: () => void;
  onItemRemove: () => void;
  onAllRemove: () => void;
  onStatusChange: () => void;
};

export type IUploadModel = {
  addFiles: (files: any) => void;
};
const UploadModal = (props: IProps, ref: any) => {
  const {
    folderId,
    visible,
    fileList = [],
    multiple = false,
    uploadfolder,
    thumbnail = false,
    fixedHeight = false,
    fileSize = '6GB',
    fileType,
    fileId,
    fileName,
    repeatStrategy,
    createChildrenFolder,
    targetFolder,
    permission = false,
    controlId = '',
    readOnly = false,
    disabled = false,
    uploadType = 'file',
    onOk,
    onCancel,
    onItemRemove,
    onAllRemove,
    onStatusChange,
  } = props;
  const { UploadButton } = Uploader;
  const [path, setPath] = useState('');
  const uloaderRef = useRef();
  useEffect(() => {
    if (folderId) {
      GetFolderById({ folderId }).then((res: { [key: string]: any }) => {
        const { folder } = res;
        const path = folder.namePath.split('\\').join('/');
        setPath(path);
      });
    }
  }, [folderId]);
  const cancel = () => {
    onCancel && onCancel();
  };
  const confirm = async () => {
    const data = await uloaderRef.current.getFiles();
    onOk && onOk(data);
  };

  const change = (files) => {
    uloaderRef.current.addfiles(files);
  };

  return (
    <Modal
      title="上传"
      visible={visible}
      onCancel={cancel}
      onOk={confirm}
      destroyOnClose
      className="upload-modal"
    >
      <span>上传至：{path}</span>
      <div className="upload-modal-container">
        <UploadButton
          multiple={multiple}
          directory={uploadfolder}
          targetFolder={targetFolder}
          permission={permission}
          controlId={controlId}
          readOnly={readOnly}
          disabled={readOnly || disabled || props.inbiz?.browser?.designer}
          onChange={change}
        />
        <Uploader
          accept={fileType?.typeList}
          fileMode={fileType?.mode}
          fileSize={fileSize}
          fileList={fileList}
          fixedHeight={fixedHeight}
          showAllRemoveBtn={multiple ? true : false}
          thumbnail={thumbnail}
          folderId={targetFolder?.length > 0 ? targetFolder[0]?.id : null}
          fileId={fileId}
          fileName={fileName}
          ref={uloaderRef}
          showStrategyModal={false}
          repeatStrategy={repeatStrategy}
          createChildrenFolder={createChildrenFolder}
          multiple={multiple}
          uploadType={uploadType}
          onItemRemove={onItemRemove}
          onAllRemove={onAllRemove}
          onStatusChange={onStatusChange}
        />
      </div>
    </Modal>
  );
};

export default forwardRef(UploadModal);
